<template>
  <div id='modify'>
    <view-box ref="viewBox">
      <Myheader :page="page"></Myheader>
      <div id="form" v-show="!showLoading">

        <divider v-if="!show">{{formName}}</divider>

        <div v-show="!show" v-for="(item, index) in form.fields">
          <!--header类型开始-->
          <div style="text-align: center" v-if="item.type=='header'">
            <h4>{{formDataArray[index].formData}}</h4>
          </div>
          <!--header类型结束-->

          <!--text类型开始-->

          <!--text-password密码-->


          <!--text-text文本输入-->
          <group v-if="item.type=='text'&&item.subtype=='text'">
            <group-title slot="title" class="group-title"><span>{{item.label}}</span><span
              :class="isRequired(item.required)">*</span></group-title>
            <x-input type="text" :required="checkRequired(item.required)"
                     :placeholder="item.placeholder" placeholder-align="left"
                     text-align="left" v-model='formDataArray[index].formData'></x-input>
          </group>

          <!--text-number数字-->


          <!--text-email电子邮箱-->
          <group v-if="item.type === 'text'&&item.subtype === 'email' ">
            <group-title slot="title" class="group-title"><span>{{item.label}}</span><span
              class="required" v-show="item.required">*</span></group-title>
            <x-input is-type="email" type="email"
                     :placeholder="item.placeholder" placeholder-align="left"
                     text-align="left" v-model='formDataArray[index].formData'></x-input>
          </group>

          <!--text-mobile手机号-->
          <tel v-if="item.type === 'text'&&item.subtype === 'tel' " :item="item" :index="index"
               @tel="telChangeSelf" ref="tel"></tel>
          <!--text类型结束-->

          <!--select类型开始-->

          <!--select-select单选-->
          <group v-if="item.type === 'select'&&item.subtype === 'select'" class="no-title" id="popup-radio-warpper">
            <group-title slot="title" class="group-title"><span>{{item.label}}</span><span
              :class="isRequired(item.required)">*</span></group-title>
            <popup-radio :options="transformKey(item.values)"
                         :placeholder="item.placeholder" v-model='formDataArray[index].formData'>
              <div slot="popup-header" class="vux-popup-header vux-1px-b">
                <div class="vux-popup-header-title">{{item.label}}</div>
              </div>
            </popup-radio>
          </group>


          <!--select-country国家-->

          <!--省市区四级联动-->
          <myaddress
            v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'"
            :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :item1="form.fields[index+1]" :index="index"
            @address="addressChangeSelf" ref="address">
          </myaddress>


          <!--<div v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'">
            {{item.label}}
            {{form.fields[index+1].label}}
          </div>-->
          <!--<myaddress v-if="item.type === 'select'&&item.subtype === 'country'"
                     :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :index="index"
                     @address="addressChangeSelf" ref="address">

          </myaddress>-->


          <!--select-city城市区三级联动-->


          <!--select类型结束-->


          <!--datatime类型开始-->


          <!--date-datetime 年月日时分秒-->

          <!--date-ymd 年月日-->
          <group v-if="item.type === 'date'&&item.subtype==='ymd'&&pcOnline" class="pc_date_select">
            <cell>
              <template slot="title">
                      <span style="height:24px;">
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
              </template>
              <el-date-picker
                v-model='formDataArray[index].formData'
                type="date"
                default-value="1990-01-01"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择出生日期">
              </el-date-picker>
            </cell>
          </group>

          <group v-if="item.type === 'date'&&item.subtype==='ymd'&&!pcOnline" class="no-title" ref="date">
            <datetime default-selected-value="1990-01-01" :start-date="max_birth" :end-date="min_birth"
                      :placeholder="item.placeholder" v-model='formDataArray[index].formData'>
              <template slot="title">
                <span style="height:24px;">
                <span>{{item.label}}</span>
                <span :class="isRequired(item.required)">*</span>
              </span>
              </template>

            </datetime>
          </group>


          <!--datatime-his 完赛事件-->

          <!--datatime类型结束-->

          <!--textarea类型开始-->

          <!--textarea-textarea文本域-->

          <!--textarea类型结束-->

          <!--file类型开始-->
          <!--file-file 文件类型-->
          <!--file-images 图片类型-->
          <upfile v-if="item.type === 'file'&&item.subtype === 'images'" :name="item.label"
                  :placeholder="item.placeholder"
                  :src="'http://api.ihuipao.com/stor/base64'"
                  :required="item.required" :index="index"
                  @fileChange="fileChangeSelf"
                  :item="item"
          >
          </upfile>

          <!--file-audit 审核类型-->
          <upfile v-if="item.type === 'file'&&item.subtype === 'audit'" :name="item.label"
                  :placeholder="item.placeholder"
                  :src="'http://api.ihuipao.com/stor/base64'"
                  :required="item.required" :index="index"
                  @fileChange="fileChangeSelf" :defaultstate="defaultstate"
                  :item="item">
          </upfile>


          <!--file类型结束-->


          <!--raidgroup类型开始-->
          <group v-if="item.type==='radio-group'" class="pc_date_select">
            <cell>
              <template slot="title">
                      <span style="height:24px;">
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
              </template>

            </cell>
            <checklist :options="transformKey(item.values)" v-model="formDataArray[index].formData"
                       :max="1"></checklist>
          </group>


          <!--raidgroup类型结束-->

          <!--checkbox复选-->

          <!--header表头-->

        </div>

        <div v-show="!show" class="button-wrapper">
          <x-button type="primary" @click.native="confirm()" text="提交">{{$t('form.submit')}}</x-button>
        </div>
      </div>

      <div id="msg">
        <msg v-show="show" class="msg" title="资料已修改" :buttons="buttons" icon="success">
          <template slot="description" slot-scope="props">
            <div>
              <group>
                <cell :title="$t('form.name')" :value="name"></cell>
                <cell-form-preview :list="mylist"></cell-form-preview>
              </group>
              <group v-if="payable==0">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                </div>
              </group>

              <group v-if="payable==1">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                  <cell v-if="!pay_at" :title="$t('form.pay')" @click.native="pay()" is-link></cell>
                </div>
              </group>
            </div>
          </template>
        </msg>
      </div>


    </view-box>
  </div>


</template>

<script type="text/ecmascript-6">
  import {cookie} from 'vux'
  /* eslint-disable*/
  import Vue from 'vue'
  
  import Myheader from '@/common/components/myheader.vue'
  import Myflow from '@/common/components/myflow.vue'
  import Loading from '@/common/components/loading.vue'
  import Upfile from '@/common/components/upfile.vue'
  import Tel from '@/common/components/tel.vue'
  import Myaddress from '@/common/components/address.vue'
  import MyFooter from '@/common/components/myfooter.vue'

  import {cityData} from '@/common/locales/cityData.js'
  import {countryData} from '@/common/locales/countryData1.js'

  import {enCountryData} from '@/common/locales/enCountryData1.js'
  import {pcCountryData} from '@/common/locales/pcCountryData1.js'
  import {pcenCountryData} from '@/common/locales/pcenCountryData1.js'

  import {DatePicker, Cascader} from 'element-ui'
  Vue.use(DatePicker)
  Vue.use(Cascader)

  import {
    Selector,
    Msg,
    Group,
    Cell,
    XButton,
    XInput,
    Datetime,
    PopupRadio,
    ToastPlugin,
    Scroller,
    XNumber,
    XTextarea,
    Checklist,
    XAddress,
    Divider,
    GroupTitle,
    TransferDom,
    Previewer,
    PopupPicker,
    CellFormPreview,
    ViewBox,
    ConfirmPlugin
  } from 'vux'

  Vue.use(ConfirmPlugin)

  // 获取表单数据
  import {getForm} from '@/api/getForm.js'
  import {sendForm} from '@/api/sendForm.js'
  import {sendPay} from '@/api/sendPay.js'
  //axios
  import qs from 'qs'
  import {axios} from '@/api/axios.js'
  import {indexedDB} from "@/api/indexedDB.js";


  //let clock1 = 1

  Vue.use(ToastPlugin,{time:3000});
  let years = []
  for (var i = 1930; i <= 2015; i++) {
    years.push({
      name: i + '年',
      value: i + ''
    })
  }
  let months = []
  for (var i = 1; i <= 12; i++) {
    months.push({
      name: i + '月',
      value: i + ''
    })
  }
  let days = []
  for (var i = 1; i <= 31; i++) {
    days.push({
      name: i + '日',
      value: i + ''
    })
  }
  export default {
    props: ['page', 'host'],
    data () {
      return {
        key: '',
        fetchData: [],
        data1: [{
          value: 'zhinan',
          label: '指南',
        }],
        inviteCode: '',//邀请码
        formName: '',
        state: '',
        showName: '',
        payable: 0,
        pay_at: '',
        mylist: [],
        raceid: '',
        showAddress: false,
        list: [{key: '086', value: '+86'},
          {key: '080', value: '+80'},
          {key: '084', value: '+84'},
          {key: '087', value: '+87'}],
        project: '',
        show: false,
        submitData: {},
        title: '默认为空',
        disclaimer: false,
        countryData: '',
        form: {},
        bloodType: '',
        birthDate: '',
        addressData: cityData,
        formDataArray: [],
        showLoading: false,
        formId: 0, //表单id
        name: '', //姓名
        idtype: '',//护照类型
        idnum: '', //证件号
        national: '',//国籍
        country: [],//居住国家
        countryCode: '',//居住国家代码
        province: '',//居住省
        city: '',//居住市
        area: '',//居住区
        address: '',//居住详细地址
        blood: '',//血型
        cloth: '',//尺码
        mobile: '',//手机号码
        email: '',//邮箱
        emername: '',//紧急联系人姓名
        emermobile: '',//紧急联系人电话
        birth: '',//出生日期
        gender: '',//性别
        proving: true,//表单是否通过所有验证规则
        disabled: true,//表单是否禁用 禁用用来展示
        _key: '',//报名表单的key 支付用
        buttons: [],//成功报名提示的按钮
        clock: true,
        max_birth: '',
        min_birth: '',
        isDateFirst: true,
        isAddressFirst: true,
        dataIndex: 0,
        mydate: '',
        pcOnline: false,
        sexlist: [{key: 'male', value: '男'},
          {key: 'female', value: '女'}],
        phonelist: ['+1', '+7', '+20', '+27', '+30', '+31', '+32', '+33', '+34', '+36', '+39', '+40', '+43', '+44', '+45', '+46', '+47', '+48', '+49', '+51', '+52', '+53', '+54', '+55', '+56', '+57', '+58', '+60', '+61', '+62', '+63', '+64', '+65', '+66', '+81', '+82', '+84', '+86', '+90', '+91', '+92', '+93', '+94', '+95', '+98', '+212', '+213', '+216', '+218', '+220', '+221', '+223', '+224', '+225', '+226', '+227', '+228', '+229', '+230', '+231', '+232', '+233', '+234', '+235', '+236', '+237', '+239', '+241', '+242', '+243', '+244', '+247', '+248', '+249', '+251', '+252', '+253', '+254', '+255', '+256', '+257', '+258', '+260', '+261', '+262', '+263', '+264', '+265', '+266', '+267', '+268', '+327', '+331', '+350', '+351', '+352', '+353', '+354', '+355', '+356', '+357', '+358', '+359', '+370', '+371', '+372', '+373', '+374', '+375', '+376', '+377', '+378', '+380', '+381', '+386', '+420', '+421', '+423', '+501', '+502', '+503', '+504', '+505', '+506', '+507', '+509', '+591', '+592', '+593', '+594', '+595', '+596', '+597', '+598', '+599', '+673', '+674', '+675', '+676', '+677', '+679', '+682', '+684', '+685', '+689', '+850', '+852', '+853', '+855', '+856', '+880', '+886', '+960', '+961', '+962', '+963', '+964', '+965', '+966', '+967', '+968', '+971', '+972', '+973', '+974', '+976', '+977', '+992', '+993', '+994', '+995', '+1242', '+1246', '+1264', '+1268', '+1345', '+1441', '+1664', '+1670', '+1671', '+1758', '+1784', '+1787', '+1809', '+1876', '+1890'],
        yearSelect: '1990',
        years: [years],
        monthSelect: '1',
        months: [months],
        days: [days],
        daySelect: '1',
        countryDataPC: '',
        dataAllCity: [],
        dataProvince: [],
        dataCity: [],
        dataArea: [],
        myjson: '',
        national: '',
        eventid: '',
        selectedOptions2: ['320000', '320200', '320214'],
        listData: [],
        defaultstate: ''
      }
    },
    computed: {
      // 一个计算属性的 getter
      sex: function () {
        if (this.gender == 'male') {
          return '男'
        } else if (this.gender == 'female') {
          return '女'
        }
      }
    },
    beforeCreate () {


    },
    created () {

      let _this = this

      indexedDB('defaultstate', 'get', this.RACEID, '', function (a) {
        this.defaultstate = a
      }.bind(this));


      //获取eventID
      this.eventid = this.$route.params.eventid
      //获取证件号
      this.idnum = this.$route.params.idnum

      this.project = this.$route.params.projectName

      this.state = this.$route.params.state

      this.eventState = this.$route.params.eventState
      //console.log(this.state)


      if (!this.$route.params.idnum) {
        this.$router.push({path: '/message'})
      }


      Vue.axios.all([this.userApply(), this.getForm()])
        .then(Vue.axios.spread(function (response1, response2) {
          if (response1.data.code == 200) {
            _this.fetchData = response1.data.data
            //console.log(_this.fetchData)
            _this.key = _this.fetchData[0]._key
          }
          if (response2.data.code == 200) {
            _this.formId = response2.data.data.form.id
            _this.formName = response2.data.data.name
            _this.form = response2.data.data.form

            //console.log('---')
            //console.log(_this.fetchData)
            //设置默认最小生日
            if (response2.data.data.max_birth != null) {
              _this.max_birth = response2.data.data.max_birth
            } else {
              _this.max_birth = '1930-01-01'
            }
            //设置默认最大生日
            if (response2.data.data.min_birth != null) {
              _this.min_birth = response2.data.data.min_birth
            } else {
              _this.min_birth = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
            }

            //如果进来是字符串类型就序列化一下
            if (typeof (_this.form.fields) == 'string') {
              _this.form.fields = JSON.parse(_this.form.fields);
            }

            //生成保存value的数组
            _this.form.fields.forEach(function (item, index) {
              //过滤掉表单的header
              if (_this.form.fields[index].type == 'header') {
                _this.form.fields.splice(index, 1)
              }
              let obj = {}
              if (item.type == 'date') {
                _this.dataIndex = index
              }
              _this.formDataArray.push(obj)

              for (let key in _this.fetchData[0]) {
                if (key == item.name) {
                  if (item.subtype == 'tel') {
                    //console.log(item)
                    if (!!_this.fetchData[0][key]) {
                      let area = _this.fetchData[0][key].split('-')[0]
                      let tel = _this.fetchData[0][key].split('-')[1]
                      item.area = []
                      item.area.push(area)
                      item.tel = tel
                      //form.fields[index]
                    }
                  } else if (item.type == 'radio-group') {
                    _this.formDataArray[index].formData = []
                    _this.formDataArray[index].formData.push(_this.fetchData[0][key])
                    //_this.formDataArray[index].formData.push(_this.fetchData[0][key])

                  } else if (item.type == 'select' && item.subtype == 'select') {
                    _this.formDataArray[index].formData = (_this.fetchData[0][key])
                  } else if (item.type == 'select' && item.subtype == 'country') {
                    //_this.formDataArray[index].formData={}
                    item.country = _this.fetchData[0].country


                    //console.log(_this.formDataArray[index].formData)
//                    item.country = _this.fetchData[0].country
//
//                    if (!!_this.fetchData[0].province) {
//                      item.province = _this.fetchData[0].province
//                    }
//
//                    if (!!_this.fetchData[0].city) {
//                      item.city = _this.fetchData[0].city
//                    }
//
//                    if (!!_this.fetchData[0].area) {
//                      item.area = _this.fetchData[0].area
//                    }

                  } else if (item.type == 'select' && item.subtype == 'city') {
                    //console.log(item)
                    //console.log(_this.fetchData[0].province)
                    item.province = _this.fetchData[0].province
                    item.city = _this.fetchData[0].city
                    item.area = _this.fetchData[0].area
                  } else if (item.type == 'file' && item.subtype == 'audit') {
                    item.img = _this.fetchData[0][key]
                  } else {
                    _this.formDataArray[index].formData = _this.fetchData[0][key]
                  }
                }
              }
            })
          }
        }))

      //判断手机端还是PC
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        this.pcOnline = false;
      } else {
        this.pcOnline = true;
        this.dataAllCity = data2tree(cityData);
      }

      indexedDB('national', 'get', this.RACEID, '', function (a) {
        this.national = a;
        if (this.pcOnline) {
          if (this.national !== '001' || this.national !== '001081' || this.national !== '001071' || this.national !== '001082') {
            this.countryDataPC = pcenCountryData
          } else {
            this.countryDataPC = pcCountryData
          }
        } else {
          if (this.national !== '001' || this.national !== '001081' || this.national !== '001071' || this.national !== '001082') {
            this.countryData = enCountryData
          } else {
            this.countryData = countryData
          }
        }
      }.bind(this));
      indexedDB('idtype', 'get', this.RACEID, '', function (a) {
        this.idtype = a;
      }.bind(this));
      indexedDB('raceid', 'get', this.RACEID, '', function (a) {
        this.raceid = a;
      }.bind(this));


    },
    methods: {
      userApply () {
        return (this.axios.post(`${window.host}registration/fetch`, qs.stringify({
          idnum: this.idnum,
          eventid: this.eventid
        })))
      },
      getForm(){
        return (this.axios.post(`${window.host}event/show`, qs.stringify({
          eventid: this.eventid
        })))
      },
      go(){
        this.$router.push({
          path: '/message'
        });
      },
      changeCountry(val){
        if (val[0] == '001') {

          this.showAddress = true

        } else {

          this.showAddress = false
        }
        this.countryCode = val[0]
      },
      pay(){
        if (this.payable != 1) {
          this.$vux.toast.show({
            type: 'warn',
            text: this.state
          })
          return
        }

        sendPay(`${window.host}registration/pay`, {
          //raceid: this.raceid,
          id: this._key
        }).then((response) => {
          if (response.data.code == '200') {
            window.location.href = response.data.data.url
          } else {
            //console.log(response)
            this.$vux.toast.show({
              type: 'warn',
              text: response.data.msg
            })
          }
        })
      },
      fileChangeSelf(opt){
        // console.log(opt)
        this.formDataArray[opt.index].formData = opt.files
      },
      telChangeSelf(opt){
        //console.log(opt)
        this.formDataArray[opt.index].formData = opt
      },
      addressChangeSelf(opt){
        //console.log(opt)
        this.formDataArray[opt.index].formData = opt.data
      },
      isRequired: function (required) {
        if (required) {
          return 'required'
        }
        return 'norequired'
      },
      checkMobile: function (str) {
        //验证手机号码
        // console.log(str)
        // console.log(event.target)

        //去除空格
        str = str.replace(/\s+/g, "");
        return {
          valid: (/^1[345678]\d{9}$/.test(str)),
          msg: '请填写符合规则的手机号码'
        }
      },
      confirm(){
        let _this = this
        //this.state='normal'
        if (this.state == 'normal' && this.eventState == 'audit') {
          //点击同意
          this.$vux.confirm.show({
            title:'操作提示',
            content: '修改报名资料后我们将会对您的资料进行重新审核，您确认要进行这个操作？',
            // 组件除show外的属性
            onCancel () {

            },
            onConfirm () {
              _this.submit()
            }
          })
        } else {
          _this.submit()
        }

      },
      submit () {
        // console.log(_this.form.fields)
        // console.log(_this.submitData)
        let _this = this

        console.log(_this.form.fields)

        
        // 验证必选项
        for (let i = 0; i < _this.form.fields.length; i++) {

          //提取报名表ID
          this.submitData.eventid = this.eventid
          //提取证件类型
          this.submitData.idtype = this.idtype
          //提取证件号
          this.submitData.idnum = this.idnum
          //国籍sub
          this.submitData.national = this.national

          //console.log(_this.form.fields[i])

          //处理国家处理
          if (_this.form.fields[i].type === 'select' && _this.form.fields[i].subtype === 'country') {
            //如果有国家表单就提取国家数据
            //console.log(_this.formDataArray[i])
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData.country
            //console.warn(_this.formDataArray[i].formData)
            //this.submitData[_this.form.fields[i].name] =_this.formDataArray[i]

          } else if (_this.form.fields[i].type === 'text' && _this.form.fields[i].subtype === 'text') {
            if (_this.form.fields[i].name == 'name') {
              this.name = _this.formDataArray[i].formData
            }
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData
          } else if (_this.form.fields[i].type === 'text' && _this.form.fields[i].subtype === 'email') {
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData
          } else if (_this.form.fields[i].type === 'select' && _this.form.fields[i].subtype === 'city') {
            //处理省市区数据
            _this.formDataArray[i].formData = {}
            _this.formDataArray[i].formData.province = _this.formDataArray[i - 1].formData.province
            _this.formDataArray[i].formData.city = _this.formDataArray[i - 1].formData.city
            _this.formDataArray[i].formData.area = _this.formDataArray[i - 1].formData.area
            this.submitData[_this.form.fields[i].name] = {}
            this.submitData[_this.form.fields[i].name].province = _this.formDataArray[i].formData.province
            this.submitData[_this.form.fields[i].name].city = _this.formDataArray[i].formData.city
            this.submitData[_this.form.fields[i].name].area = _this.formDataArray[i].formData.area

            if (_this.formDataArray[i - 1].formData.country == '001' && !this.submitData[_this.form.fields[i].name].province) {
              this.proving = false
              _this.$vux.toast.show({
                text: '请选择城市',
                type: 'warn'
              })
              return
            }
          } else if (_this.form.fields[i].type === 'radio-group') {
            //处理radio-group类型
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData[0]
          } else if (_this.form.fields[i].type === 'select' && _this.form.fields[i].subtype === 'select') {
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData
          } else if (_this.form.fields[i].type === 'file' && _this.form.fields[i].subtype === 'audit') {
            this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData
          } else if (_this.form.fields[i].type === 'text' && _this.form.fields[i].subtype === 'tel') {
            if (_this.form.fields[i].required && typeof (_this.formDataArray[i].formData) == 'undefined') {
              _this.$vux.toast.show({
                text: `${_this.form.fields[i].label}` + _this.$t('form.mustenter'),
                type: 'warn'
              })
              this.proving = false
            } else {
              this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData
            }

            if (typeof (this.formDataArray[i].formData) == 'undefined') {

            } else {
              if (!!_this.formDataArray[i].formData.tel) {
                this.submitData[_this.form.fields[i].name] = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
              } else {

              }
            }
          }

          if (_this.form.fields[i].required && typeof (_this.formDataArray[i].formData) == 'undefined') {
            //没有数据
            _this.$vux.toast.show({
              text: `${_this.form.fields[i].label}是必填`,
              type: 'warn'
            })
            // 验证未通过
            this.proving = false
            return
          }


          //审核报名资料必填 如果是审核状态并且有审核的资料
          if (this.defaultstate == 'audit' && _this.form.fields[i].type === 'file' && _this.form.fields[i].subtype === 'audit') {
            //console.log(_this.formDataArray[i].formData)
            if (!_this.formDataArray[i].formData) {
              //没有数据
              _this.$vux.toast.show({
                text: `${_this.form.fields[i].label}是必填`,
                type: 'warn'
              })
              // 验证未通过
              this.proving = false
              return

            } else if (_this.formDataArray[i].formData.length == 0) {
              //没有数据
              _this.$vux.toast.show({
                text: `${_this.form.fields[i].label}是必填`,
                type: 'warn'
              })
              // 验证未通过
              this.proving = false
              return
            } else {

            }
          }

          /*       else if (_this.form.fields[i].name === 'mobile') {
           //电话
           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.mobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.mobile = ''
           }
           }*/

//          else if (_this.form.fields[i].name === 'email') {
//            //邮件
//            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
//              this.submitData.email = _this.formDataArray[i].formData
//            } else {
//              this.submitData.email = ''
//            }
//          } else if (_this.form.fields[i].name === 'emername') {
//            //紧急联系人姓名
//            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
//              this.submitData.emername = _this.formDataArray[i].formData
//            } else {
//              this.submitData.emername = ''
//            }
//          }

          /*          else if (_this.form.fields[i].name === 'emermobile') {
           //紧急联系人电话

           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.emermobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.emermobile = ''
           }
           } */


          else if (_this.form.fields[i].name === 'birth') {
            //生日
            //在PC端取PC得值
            /*      if (this.pcOnline) {
             this.submitData.birth = this.yearSelect + '-' + this.addZero(this.monthSelect) + '-' + this.addZero(this.daySelect)
             this.formDataArray[i].formData = this.submitData.birth
             console.log(this.submitData.birth)
             } else {
             if (typeof(_this.formDataArray[i].formData) !== "undefined") {
             this.submitData.birth = _this.formDataArray[i].formData
             } else {
             this.submitData.birth = ''
             }
             }*/
            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
              this.submitData.birth = _this.formDataArray[i].formData
            } else {
              this.submitData.birth = ''
            }


          }


          //提取
          if (_this.form.fields[i].name === 'gender') {
            this.gender = _this.formDataArray[i].formData[0]
          }

          //提交的时候更新tel
          if (_this.form.fields[i].subtype === 'tel') {
            this.$refs.tel.forEach(function (item, index) {
              if (item.index === i) {
                if (!!item.formData) {

                } else {
                  item.formData = ''
                }
                console.log(item.formData)
                _this.formDataArray[i].formData = {
                  telCode: item.telCode,
                  tel: item.formData.replace(/\s+/g, "")
                }
              }
            })
          }


          if (_this.form.fields[i].required) {
            // console.log(_this.formDataArray)
            if (_this.form.fields[i].subtype == 'address' && _this.countryCode != '001') {
              _this.formDataArray[i][0] = ''
              _this.formDataArray[i][1] = ''
              _this.formDataArray[i][2] = ''
            } else {
//              if (!_this.formDataArray[i].formData || _this.formDataArray[i].formData.length === 0) {
//
//                _this.$vux.toast.show({
//                  text: `${_this.form.fields[i].label}` + _this.$t('form.mustenter'),
//                  type: 'warn'
//                })
//                // 验证未通过
//                this.proving = false
//                return
//              }
            }


            // 验证手机号码
            if (_this.form.fields[i].subtype === 'tel' && _this.formDataArray[i].formData.telCode[0] == '+86' && !(/^1[345678]\d{9}$/.test(_this.formDataArray[i].formData.tel))) {
              _this.$vux.toast.show({
                text: `${_this.form.fields[i].label}` + _this.$t('form.telnotlegal'),
                type: 'warn'
              })
              // 验证未通过
              this.proving = false
              return
            }
            // 验证邮箱
            if (_this.form.fields[i].subtype === 'email' && !(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(_this.formDataArray[i].formData))) {
              //console.log('---')
              //console.log((/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(_this.formDataArray[i].formData)))
              //console.log(_this.formDataArray[i].formData)
              _this.$vux.toast.show({
                text: `${_this.form.fields[i].label}` + _this.$t('form.addressnotlegal'),
                type: 'warn'
              })
              // 验证未通过
              this.proving = false
              return
            }

            this.proving = true
          } else {
            //验证手机号码
            if (_this.form.fields[i].subtype === 'tel' && typeof(_this.formDataArray[i].formData) !== "undefined" && this.formDataArray[i].formData.telCode === '086') {
              console.log(_this.formDataArray[i].formData)
              if (_this.formDataArray[i].formData.tel == '') {

              } else {
                if (!(/^1[345678]\d{9}$/.test(_this.formDataArray[i].formData.tel))) {
                  _this.$vux.toast.show({
                    text: `${_this.form.fields[i].label}` + _this.$t('form.telnotlegal'),
                    type: 'warn'
                  })
                  this.proving = false
                  return
                }
              }

            }
          }
        }

        if (this.submitData.emermobile === this.submitData.mobile) {
          _this.$vux.toast.show({
            text: '本人联系号码与紧急联系人号码不能相同',
            type: 'warn'
          })
          this.proving = false
          return
        }

        if (!this.proving) {
          return
        }

        // 把提交的数据转成formdata格式


        //开启loading动画

        // _this.$vux.loading.show({
        //   text: '提交中'
        // })
        /* for (let key in this.submitData) {
         if (this.submitData[key] == '' || this.submitData[key].indexOf('+') == 0) {
         delete this.submitData[key];
         }
         }*/

        this.submitData.id = _this.key


        for (let key in this.submitData) {
          if (this.submitData[key] == '') {
            delete this.submitData[key];
          }
        }
        //console.log(this.submitData)

        //http://api.ihuipao.com/
        //sendForm(`http://v3.ihuipao.com/registration/save`, this.submitData).then((response) => {
        sendForm(`${window.host}registration/edit`, this.submitData).then((response) => {
          
          //取消loading动画
          // this.$vux.loading.hide()
          //state
          // 展示报名成功页面

          if (response.data.code == '200') {
            indexedDB('inviteCode', 'remove', this.RACEID, '', (a) => {
            })
            indexedDB('IDNumber', 'set', this.RACEID, this.idnum, function () {
            });
            if (this.state == 'normal') {
              this.state = this.$t('message.normal')
            } else if (this.state == 'wait') {
              if (response.data.data.pos) {
                //候补 有post人数
                this.state = `正在候补(前边有${response.data.data.pos}人)`
              } else {
                this.state = `正在候补`
              }
            } else if (this.state == 'draw') {
              this.state = `等待抽签`
            } else if (this.state == 'undraw') {
              this.state = `未中签(候补代码${response.data.data.wait_post})`
            } else if (this.state == 'audit') {
              this.state = `审核中`
            } else if (this.state == 'unaudit') {
              this.state = `未通过审核(${response.data.data.refusemsg})`
            }


            this.mylist.push({label: this.$t('message.status'), value: this.state})
            this.mylist.push({label: this.$t('index.gender'), value: this.sex})
            this.mylist.push({label: this.$t('index.project'), value: this.project})


            this.show = true

            this._key = response.data.data._key
            if (response.data.data.payable != 1) {
              //不进入支付流程 跳转报名信息展示
              this.payable = 0
              this.pay_at = response.data.data.pay_at
              /*   _this.buttons.push({
               type: 'default',
               text: '去支付',
               })*/
            } else if (response.data.data.payable === 1) {
              //可以进入支付流程
              this.payable = 1
              this.pay_at = response.data.data.pay_at
              /*    _this.buttons.push({
               type: 'primary',
               text: '去支付',
               onClick: this.pay.bind(this)
               })*/
            }
          } else {
            //提示错误信息
            _this.$vux.toast.show({
              type: 'warn',
              text: response.data.msg
            })
          }
        })

      },
      change () {

      },
      getNumber (str) {
        return str | 0
      },
      transformKey (array) {
        let myArray = []
        array.forEach((item, index) => {
          let obj = {}
          obj.key = item.value
          obj.value = item.label
          myArray.push(obj)
        })
        return myArray
      },
      fileUp (event, index) {
        // if(event.target=='')
        // console.log(event.target[0] === 'div')
        event.currentTarget.children[1].click()
      },
      fileChange (event, index) {
        // console.log(this.$refs.file)
        // console.log(event.target.files[0])
        event.target.parentNode.children[0].innerHTML = `<p>文件名：${event.target.files[0].name}  大小：${((event.target.files[0].size / 1024 / 1024 * 100) | 0) / 100}M</p>`
        // console.log(this.getIndex(event.target))
      },
      getIndex (element) {
        return Array.prototype.slice.call(document.querySelectorAll('input[type="file"]')).indexOf(element)
      },
      checkRequired(required){
        if (required) {
          return true
        }
        return false
      },
      onChangePC(val){
        if (val == '001') {
          this.showAddress = true
        } else {
          this.showAddress = false
        }
        this.countryCode = val
      },
      selectCity: function (e) {
        this.dataCity = this.dataAllCity[e.target.value].children;
        this.dataArea = this.dataCity[0].children;
        this.dataAllCity[0].value = this.dataAllCity[e.target.value].value
      },
      selectArea: function (e) {
        this.dataArea = this.dataCity[e.target.value].children;
        this.dataCity[0].value = this.dataCity[e.target.value].value
      },
      trueArea: function (e) {
        this.dataArea[0].value = this.dataArea[e.target.value].value
      },
      addZero(a){
        if (a < 10) {
          return 0 + a;
        } else {
          return a;
        }
      }

    },
    directives: {
      TransferDom
    },
    components: {
      Tel,
      Divider,
      Myheader,
      Myflow,
      Group,
      Cell,
      XButton,
      XInput,
      Datetime,
      PopupRadio,
      ToastPlugin,
      Scroller,
      XNumber,
      XTextarea,
      Checklist,
      XAddress,
      Loading,
      Upfile,
      GroupTitle,
      Msg,
      Selector,
      PopupPicker,
      CellFormPreview,
      MyFooter,
      ViewBox,
      Myaddress
    }
  }
  function data2tree(datas) {
    var dataArray = [];
    datas.forEach(function (data) {
      var parent = data.parent;
      if (!parent) {
        var name = data.name;
        var value = data.value;
        var objTemp = {
          label: name,
          value: value,
          parent: parent
        }
        dataArray.push(objTemp);
      }
    })
    data2treeDG(datas, dataArray)
    return dataArray;
  }
  function data2treeDG(datas, dataArray) {
    for (var j = 0; j < dataArray.length; j++) {
      var dataArrayIndex = dataArray[j];
      var childrenArray = [];
      var CATL_CODEP = dataArrayIndex.value;
      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        var parent = data.parent;
        if (parent == CATL_CODEP) {//判断是否为儿子节点
          var name = data.name;
          var value = data.value;
          var objTemp = {
            label: name,
            value: value,
            parent: parent
          }
          childrenArray.push(objTemp);
        }
      }
      if (childrenArray.length > 0) {
        dataArrayIndex.children = childrenArray;
      }

      if (childrenArray.length > 0) {//有儿子节点则递归
        data2treeDG(datas, childrenArray);
      } else {

      }

    }
    return dataArray;
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">


  #form .norequired {
    display: none;
  }

  #form .required {
    display: inline-block;
    color: #F43530;
  }

  #form #popup-radio-warpper .group-title {
    position: relative;
    top: 20px;
    z-index: 9;
    height: 0;
    color: #000;
    font-size: 17px;
    pointer-events: none;
  }

  #form #popup-radio-warpper .weui-cell {
    height: 24px;
  }

  #form #number-warpper .group-title {
    position: relative;
    top: 20px;
    z-index: 9;
    height: 0;
    color: #000;
    font-size: 17px;
  }

  #form #number-warpper .weui-cell {
    height: 24px;
  }

  .msg .weui-msg__desc p {
    line-height: 1.5;
  }

  #form .mask {
    width: 100%;
    height: 100vh;
    background: red;
    position: absolute;
  }

  #form .tel .vux-x-input {
    padding: 0;
  }

  #form .tel .weui-select {
    width: 105px;
    box-sizing: border-box;
  }

  #form .tel .weui-cell__primary {
    padding-left: 15px;
  }

  #form .tel .vux-x-input .vux-selector:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
  }

  #msg .weui-cell {
    text-align: left;
  }

  #msg .weui-msg__text-area {
    padding: 0;
  }

  .pc_date_select select {
    background-color: #ffffff;
    background-image: none !important;
    filter: none !important;
    border: 1px solid #e5e5e5;
    outline: none;
    width: 100px;
    height: 25px;
    line-height: 25px;
  }

  .pc_address_select select {
    background-color: #ffffff;
    background-image: none !important;
    filter: none !important;
    border: 1px solid #e5e5e5;
    outline: none;
    width: 180px;
    height: 25px;
    line-height: 25px;
  }

  .pc_country_select .weui-cell_select-after .weui-select {
    padding-left: 15px;
  }

  #form .weui-cells__title {
    color: #000
  }

  #modify .vux-popup-dialog {
      position: absolute;
      top: 20%;
      left: 50%;
      bottom: auto;
      width: 850px;
      margin-left: -425px;
      margin-top: 100px;
    }

    

</style>




